<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" media="screen" type="text/css" href="../../css/jquery.tools/tabs-no-images.css" /> 
<script src="jquery.tools.min.js"></script>
<script>
	//perform JavaScript after the document is scriptable.
	$(function() {
	    // setup ul.tabs to work as tabs for each div directly under div.panes
	    $("ul.tabs").tabs("div.panes > div");
	    
	 // :first selector is optional if you have only one tabs on the page
	    $(".css-tabs:first").tabs(".css-panes:first > div");
	});
</script>

</head>
<body>

<div class="tabs" >
<!-- tabs -->
<ul class="css-tabs">
  <li><a id="t1" href="#tab1">Tab 1</a></li>
  <li><a id="t2" href="#tab2">Second tab</a></li>
  <li><a id="t3" href="#tab3">A ultra long third tab</a></li>
</ul>
<!-- panes -->
<div class="css-panes">

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
      viverra, leo sit amet auctor fermentum, risus lorem posuere
      tortor, in accumsan purus magna imperdiet sem.
    </p>

    <p>
      Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
      facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
      nibh metus, faucibus quis, semper ut, dignissim id, diam.
    </p>
  </div>

  <div>

    <p>
      Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
      molestie sed, tristique sit amet, blandit eu, turpis. Mauris
      hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
      molestie dui quam vitae dui.
    </p>
    <p>
      Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
      tortor. Maecenas id augue. Vivamus interdum nulla ac
      dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
      eget dui volutpat molestie.
    </p>
  </div>

  <div>
    <p>

      Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
      imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
      nisl. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus.
    </p>

    <p>
      In sed dolor. Etiam eget quam ac nibh pharetra
      adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
      mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
      nisi. Vivamus at enim. Integer semper imperdiet
      massa. Vestibulum nulla massa, pretium quis, porta id,
      vestibulum vitae, velit.
    </p>
  </div>
</div>

</body>
</html>